<template>
    <div class="block">
        <el-row>
            <el-col :span="24" class="qryform">
                <el-select v-model="event_type" multiple placeholder="请选择类型" clearable>
                    <el-option v-for="item in eventlist" :key="item.value" :label="item.name" :value="item.value"> </el-option>
                </el-select>
                &nbsp;&nbsp;&nbsp;&nbsp;

                选择日期:<el-date-picker
                        v-model="dateRange" @change="datechange"
                        type="daterange" align="right" unlink-panels 
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker> 
                &nbsp;&nbsp;&nbsp;&nbsp;
                代码: <el-input style="width:120px" v-model="code" clearable/>
                &nbsp;&nbsp;&nbsp;&nbsp;
                名称: <el-input style="width:120px" v-model="name" clearable/>
                &nbsp;&nbsp;&nbsp;&nbsp;
                关注: <el-radio-group v-model="star" size="mini">
                        <el-radio-button label="">所有</el-radio-button>
                        <el-radio-button label="true">关注</el-radio-button>
                        <el-radio-button label="false">未关注</el-radio-button>
                        </el-radio-group>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="primary" class="ml20" @click="reQuery">查询</el-button>

                <!-- <el-button type="warning" @click="dialogVisible = true">拉取港通数据</el-button> -->
                <!-- <el-button type="warning" @click="fillRecord">填充记录</el-button> -->
            </el-col>
        </el-row>
        <stockTable ref="stockTable" style="width: 100%"></stockTable>
        <el-dialog  v-dialogDrag
            title="数据拉取"
            :visible.sync="dialogVisible"
            :close-on-click-modal = "false"
            width="600px">
            <el-form>
                <el-form-item label="当前状态" :class="isPulling?'red':'green'">
                    {{isPulling?"正在拉取":"空闲"}}
                </el-form-item>
                <el-form-item  v-if="info">
                    {{info}}
                </el-form-item>
                <!-- <el-form-item label="选择日期">
                    <el-date-picker v-model="pullDate" type="date" placeholder="选择日期" :clearable="false"
                        value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
                </el-form-item> -->
                <el-form-item style="text-align:center">
                    <el-button type="primary" @click="startPull">开始拉取</el-button>
                    <el-button type="primary" v-if="isPulling" @click="stopPull">强行停止</el-button>
                    <el-button @click="dialogVisible = false">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
import config from '~/config'
import dayjs from '~/plugins/day';

import datadict from '~/plugins/dict';
import stockTable from '~/components/stock/stockTable.vue';

export default {
    components:{
        stockTable
    },
    data() {
        return {
            tableheight: null,
            dataList: [],
            sel_id : "",

            event_type: "",
            startDate : "",
            endDate : "",
            dateRange : [],
            code : "",
            name : "",
            star : "",

            loading: false,
            dialogVisible : false,
            isPulling : false,
            info : "",
            pullDate : "",
            pickerOptions: this.getPickerOptions(),

            eventlist: datadict.eventTypeList,
            eventMap : datadict.getEventTypeMap(),
        }
    },
     

    mounted() {
        this.setTableHeight();
        this.initDate();
        var that = this;
        var date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24);
        this.pullDate = dayjs(date).format();
        setInterval(function(){
            if(!that.dialogVisible) return;
            that.getPullStatus();

        },3000)
    },

    methods: {
        setTableHeight(){
            var $this = this;
            setTimeout(function(){
                $this.$refs.stockTable.setTableHeight();
                $this.getDataList();
            },200)
        },
        initDate(s,e) {
            var start = new Date();
            var end = new Date();
            if(s){
                start = s;
            }else {
                var diff = 3;
                if(start.getDay()==0){
                    diff = 5;
                }else if(start.getDay()==1){
                    diff = 6;
                }else if(start.getDay()==2){
                    diff = 6;
                }else if(start.getDay()==3){
                    diff = 6;
                }else if(start.getDay()==6){
                    diff = 4;
                }
                start.setTime(start.getTime() - 3600 * 1000 * 24*diff);
            }
            if(e){
                end = e;
            }else {
                //  end.setTime(end.getTime() - 3600 * 1000 * 24 );
            }
            this.dateRange=[start,end];
            this.datechange();
        },
        datechange(){
            var daterange = this.dateRange;
            if(!daterange || daterange.length==0){
                this.startDate = "";
                this.endDate = "";
            }else {
                this.startDate = this.dateRange[0].getTime();
                this.endDate = this.dateRange[1].getTime();
            }
        },
        getPriceClass(diff,is_record_price){
            if(diff>0){
                return "red"
            }else if(diff<0){
                if(is_record_price) return "yellow"
                return "green"
            }else{
                return ""
            }
        },
        addComp(item){
            window.$vue.addCompItem(item);
        },
        getULUrl(code){
            if("6"==code.substring(0,1)){
                return "https://www.uldata.com/hsgt/sh"+code;
            }else{
                return "https://www.uldata.com/hsgt/sz"+code;
            }
        },
        reQuery(){
            this.getDataList();
        },
        // 获取数据
        getDataList() {
            this.$refs.stockTable.clear();
            var args = "";
            var start ="";
            var end = "";
            if(!this.startDate){
                this.$message.error("请选择日期");
                return;
            }
            if(this.startDate && this.endDate){
                start = dayjs(this.startDate).format();
                end = dayjs(this.endDate).format();
                start = start.substring(0,10)
                end = end.substring(0,10)
            }
            args = `event_type=${this.event_type}&s=${start}&e=${end}&code=${this.code}&name=${this.name}&star=${this.star}`;
            this.loading = true;
            this.$axios.get(`${config.sapi}/api/stock/gtList?${args}`)
            .then((res) => {
                this.loading = false;
                if (res.data.code == 200) {
                    this.$refs.stockTable.setDataList(res.data.data);
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        getPullStatus() {
            this.$axios.get(`${config.sapi}/api/stock/getGTTaskStatus`)
            .then((res) => {
                if (res.data.code == 200) {
                    this.isPulling = res.data.data.status;
                    this.info = res.data.data.info;
                } else {
                    this.$message.error(res.data.message);
                }
            })

        },
        stopPull() {
            this.$axios.get(`${config.sapi}/api/stock/stopGTTask`)
            .then((res) => {
                if (res.data.code == 200) {
                } else {
                    this.$message.error(res.data.message);
                }
            })

        },
        startPull() {
            // var date = this.pullDate;
            // date=date.substring(0,10).replace(/-/g,"")
            this.$axios.get(`${config.sapi}/api/stock/getNewEventList?type=1`)
            .then((res) => {
                if (res.data.code == 200) {
                    this.isPulling = res.data.data;
                } else {
                    this.$message.error(res.data.message);
                }
            })

        },
        fillRecord(){
            this.$axios.get(`${config.sapi}/api/stock/fillRecord`)
            .then((res) => {
                if (res.data.code == 200) {
                } else {
                    this.$message.error(res.data.message);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.flexdiv {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    button{
        margin-left: 10px;
    }
}

.qryform{
    margin-bottom:10px;
    button{
        margin-top:0px;
        vertical-align: middle;
    }
}
.order-class{
    display: inline-block;
    margin-right: 10px;
    min-width: 50px;
}

.red{
    color: red;
}
.green{
    color: green;
}
.yellow{
    color: rgb(96, 22, 233)
}
.link-item{
    font-size: 12px;
}

</style>
